<script setup>
import { reactive, ref, onMounted } from 'vue'
import { resetForm, objCoppy, myConfrim } from '@/utils'
import { getCollageListApi, addMajorApi, listApi, editMajorApi, deleteMajorApi } from '@/api/major'

// 搜索表单内容
const searchForm = reactive({
    majorName: '',
    collageName: '',
    currentPage: 1,
    pageSize: 10,
    total: 0
})
// 学院列表
const collageList = ref([])
// 新增或者编辑弹窗属性
const addDialog = reactive({
    title: '',
    height: 200,
    width: 400,
    visible: false
})
// 表单属性
const addModel = reactive({
    type: '', // 0 新增 1 编辑
    majorId: '',
    collageId: '',
    majorName: '',
    orderNum: ''
})
// 表单校验规则
const rules = {
    collageId: [{
        trigger: 'blur',
        required: true,
        message: '请选择学院'
    }],
    majorName: [{
        trigger: 'blur',
        required: true,
        message: '请填写专业名称'
    }],
}
// 表格高度
const tableHeight = ref(0)
onMounted(() => {
    tableHeight.value = window.innerHeight - 220
})
// 表格数据
const tableData = ref([])


// 获取表格数据
const getList = async () => {
    const res = await listApi(searchForm)
    if (res) {
        // 设置表格内容
        tableData.value = res.data.records
        searchForm.total = res.data.total
    }
}
getList()
// 搜索按钮
const searchBtn = () => getList()
// 重置按钮
const resetBtn = () => {
    searchForm.majorName = ''
    searchForm.collageName = ''
    searchForm.currentPage = 1
    getList()
}

const addForm = ref(null)
// 新增按钮
const addBtn = async () => {
    // 清空上一次的表单
    resetForm(addForm.value, addModel)
    // 获取学院信息
    const res = await getCollageListApi()
    if (res) {
        collageList.value = res.data
    }
    // 显示弹窗
    addDialog.title = '新增专业'
    addDialog.visible = true
    addModel.type = '0'
}
// 删除按钮
const deleteBtn = async (row) => {
    const confirm = await myConfrim('确定要删除该专业吗?')
    if (confirm) {
        let res = await deleteMajorApi({
            majorId: row.majorId
        })
        if (res) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            // 刷新列表
            getList()
        }
    }
}
// 编辑按钮
const editBtn = async (row) => {
    // 清空上一次的表单
    resetForm(addForm.value, addModel)
    // 获取学院信息
    const res = await getCollageListApi()
    if (res) {
        collageList.value = res.data
    }
    // 把要编辑的数据放入表单
    objCoppy(row, addModel)
    // 显示弹窗
    addDialog.title = '编辑专业'
    addDialog.visible = true
    addModel.type = '1'
}
// 弹窗确认
const onConfirm = async () => {
    await addForm.value.validate(async valid => {
        if (valid) {
            let res = null
            if (addModel.type === '0') {
                res = await addMajorApi(addModel)
            } else if (addModel.type === '1') {
                res = await editMajorApi(addModel)
            }
            if (res) {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                getList()
                addDialog.visible = false
            }
        }
    })
}
// 弹窗取消
const onClose = () => addDialog.visible = false
// 页数改变时触发
const currentChange = (page) => {
    searchForm.currentPage = page
    getList()
}
// 页数改变时触发
const sizeChange = (size) => {
    searchForm.pageSize = size
    getList()
}
</script>

<template>
    <!-- 搜索栏 -->
    <el-form :model="searchForm" :inline="true">
        <el-form-item>
            <el-input v-model="searchForm.collageName" placeholder="请输入学院名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="searchForm.majorName" placeholder="请输入专业名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button icon="Search" @click="searchBtn">搜索</el-button>
            <el-button style="color: #ff7670;" icon="Close" @click="resetBtn">重置</el-button>
            <el-button v-permission="['sys:majorList:add']" type="primary" icon="Plus" @click="addBtn">新增</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :height="tableHeight" :data="tableData" border stripe>
        <el-table-column prop="majorName" label="专业名称"></el-table-column>
        <el-table-column prop="collageName" label="所属学院"></el-table-column>
        <el-table-column prop="orderNum" label="序号"></el-table-column>
        <el-table-column v-permission="['sys:majorList:edit', 'sys:majorList:delete']" label="操作" width="200" align="center">
            <template #default="scope">
                <el-button icon="Edit" type="primary" @click="editBtn(scope.row)">编辑</el-button>
                <el-button icon="Delete" type="danger" @click="deleteBtn(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="searchForm.currentPage"
        :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchForm.pageSize" layout="total,sizes,prev,pager,next,jumper"
        :total="searchForm.total" background>
    </el-pagination>
    <!-- 弹窗 -->
    <el-dialog v-model="addDialog.visible" :width="addDialog.width" :close-on-click-modal="false">
        <template #header>
            <h1>{{ addDialog.title }}</h1>
        </template>
        <div :style="{ height: addDialog.height + 'px' }">
            <el-form :model="addModel" ref="addForm" :rules="rules" label-width="80px">
                <el-form-item prop="collageId" label="所属学院">
                    <el-select style="width: 100%;" v-model="addModel.collageId" placeholder="请选择学院">
                        <el-option v-for="item in collageList" :key="item.collageId" :label="item.collageName"
                            :value="item.collageId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业名称" prop="majorName">
                    <el-input v-model="addModel.majorName"></el-input>
                </el-form-item>
                <el-form-item label="序号">
                    <el-input v-model="addModel.orderNum"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>